<template>
  <div class="app-container">
       <el-select
      v-model="value"
      style="width: 200px; padding-left: 5px; padding-top: 10px"
      size="medium"
      placeholder="请选择用户状态"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

     <el-select
      v-model="value"
      style="width: 200px; padding-left: 5px; padding-top: 10px"
      size="medium"
      placeholder="请选择用户会员等级"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
     <el-select
      v-model="value"
      style="width: 200px; padding-left: 5px; padding-top: 10px"
      size="medium"
      placeholder="请选择用户性别"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <!-- 输入框 -->
    <el-input v-model="input" style="width: 200px; padding-left: 5px; padding-top: 10px" size="medium"
      placeholder="请输入用户id" />
      <!-- 输入框 -->
    <el-input v-model="input" style="width: 200px; padding-left: 5px; padding-top: 10px" size="medium"
      placeholder="请输入昵称" />

    <!-- 按钮 -->
    <el-button type="primary" size="medium" style="margin-left: 10px" icon="el-icon-search">查找</el-button>
    


    <!-- 表格 -->
    <el-table  :data="dataBase" :default-sort="{prop: 'date', order: 'descending'}" border style="margin-top: 10px; margin: 10px; width: 98%;"
      :header-cell-style="{ 'text-align': 'center', 'font-size': '12px' }" :cell-style="{ 'text-align': 'center' }">
      <el-table-column label="用户ID"  prop="ID" sortable>

      </el-table-column>

      <el-table-column label="昵称"  prop="Name" >

      </el-table-column>
      <el-table-column label="手机号码"  prop="phone" >

      </el-table-column>
      <el-table-column label="性别"  prop="sex" >
         <template slot-scope="scope">
          <el-popover>
            <div slot="reference" >
              <el-tag size="medium">{{ scope.row.sex }}</el-tag>
            </div>
          </el-popover>
        </template>

      </el-table-column>
      <el-table-column label="所属学校"  prop="school" >

      </el-table-column>
      <el-table-column label="状态"  prop="state" >
         <template slot-scope="scope">
          <el-popover>
            <div slot="reference" >
              <el-tag size="medium">{{ scope.row.state }}</el-tag>
            </div>
          </el-popover>
        </template>

      </el-table-column>
      <el-table-column label="上次登录时间"  prop="time" >

      </el-table-column>


      <el-table-column label="上次登录IP"  prop="ip">
  
      </el-table-column>

      <el-table-column label="操作" width="270px">
        <template slot-scope="scope">
          <el-button type="primary" size="small" >冻结</el-button>
           <el-button type="primary" size="small" @click="handleClick(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-pagination background style="margin-top: 10px" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]"
      :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />


    <!-- 更新用户弹窗 -->

    <el-dialog title="编辑" :visible.sync="dialogTable">
        <el-form label-position="left" ref="form" :model="form" label-width="100px" >
            
            <el-form-item label="用户昵称" :rules="[
                { required: true, message: '用户昵称不能为空'},
              ]">
              <el-input style="width: 350px;" v-model="form.roleName"></el-input>
            </el-form-item>

            <el-form-item label="用户手机号" :rules="[
                { required: true, message: '用户手机号不能为空'},
              ]">
              <el-input style="width: 350px;" v-model="form.roleName"></el-input>
            </el-form-item>
            <el-form-item label="用户性别" :rules="[
                { required: true, message: '性别不能为空'},
              ]">
              <el-select  style="width: 200px;" v-model="value" placeholder="请选择性别">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户等级" :rules="[
                { required: true, message: '用户不能为空'},
              ]">
              <el-select  style="width: 200px;" v-model="value" placeholder="请选择用户等级">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户状态" :rules="[
                { required: true, message: '用户状态不能为空'},
                ]">
                <el-select
                v-model="value1"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择用户状态">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
    
    
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogTable = false">取 消</el-button>
            <el-button type="primary" @click="dialogTable = false">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>



<script>
  export default {
    data() {
      return {
        dialogTableVisible: false,
        dialogTable: false,
        form: {
          Name: '',
          phone: '',
          sex: '',
          grade: '',
         state: '',

        },
        dataBase: [{
          ID: 12,
          Name: "admin",
          phone:"130000000001",
          sex:"女",
          school:"pepe测试学校",
          state:"激活",
          time:"6月25日16时38分",
          ip:"100.116.2.35.54"
         
        }, {
          ID: 12,
          Name: "xyc",
          phone:"130000000001",
          sex:"男",
          school:"",
          state:"冻结",
          time:"6月25日16时38分",
          ip:"192.168.1.1"
          
         
        },  ],
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        options1: [{
          value: 'HTML',
          label: 'HTML'
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        }],
        value1: []
      }
    },


    methods: {

      handleClick(val) {
        console.log(val)
        this.form.Name = val.Name
        this.dialogTable = true
      }
    }
  }

</script>
<style>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>